import React, { Component } from 'react';
import service from '../../api';
import Recommend from '../Ind/Home/recommend';
import "./detail.scss"
import { NavBar, Button,Swiper,Tag, Toast  } from 'antd-mobile'
import { withRouter } from 'react-router-dom';
// import { TruckOutline, StarOutline } from 'antd-mobile-icons'


class Detail extends Component {

    constructor(props) {
        super(props);
        this.state = {
            detlist: [],
            swiper:[]
            // userid: '',
            // token: '',
            // num: 1,
        }
    }
    back() {
        this.props.history.go(-1)
    }
    componentDidMount() {
        console.log(this.props.location.state.proid);
        service.product.pro_detail(this.props.location.state.proid).then((res) => {
            console.log(res.data);

            this.setState({ detlist: res.data.data }, () => {
                // console.log(this.state.detlist);
                // console.log(this.state.list.originprice);
            })
            this.setState({ swiper: res.data.data.banners[0].split(",") }, () => {
                console.log(this.state.swiper);
            })
        })
    }
    // Addcar() {
    //     console.log(this.props.location.state.proid);
    //     this.setState({ token: localStorage.getItem('token') }, () => {
    //         console.log(this.state.token);
    //     })
        
    //     cart_add({ num: 1, userid:  localStorage.getItem('userid') , proid: this.props.location.state.proid }).then((res) => {
    //         console.log(res.data);
    //         console.log(this.props.location.state.proid);

    //         if (res.data.code == 200) {
    //             Toast.show({
    //                 icon: 'success',
    //                 content: '已加入购物车',
    //             })
    //         }
    //     })
    // }
    // go() {
    //     this.props.history.push(' ')

    // }
    render() {
        return (
            <div className='detail'>
              <NavBar onBack={() => { this.back() }}>详情</NavBar>  
              <div className="show">
                    <Swiper autoplay loop autoplayInterval={1000} className="swiper">
                        {
                            this.state.swiper.map((item, index) => {
                                return (
                                    <Swiper.Item key={index}>
                                        <img src={item} alt="" />
                                    </Swiper.Item>
                                )
                            })
                        }
                    </Swiper>
                </div>
                <Recommend/>
                {/* <div className="bottom">
                <h3>￥{this.state.list.originprice}</h3>
                    <span>销量：{this.state.list.sales}</span>
                    <Tag color='primary' fill='outline'>
                        {this.state.list.brand}
                    </Tag>
                    <Tag color='#87d068' fill='outline'>
                        {this.state.list.category}
                    </Tag>
                    <h4>{this.state.list.proname}</h4>
                </div>
                <Recommend/>

                <div className="action">
                    <TruckOutline onClick={() => { this.go() }} />
                    <StarOutline />
                    <Button color='danger' onClick={() => {
                        this.Addcar()
                    }}>加入购物车</Button>
                </div> */}
            </div>
        );
    }
}

export default withRouter(Detail);